<template>
	<el-dialog title="查看私信" :visible.sync="visible" width="992px" top="10vh" append-to-body>
		<div class="letter_detail_wrapper">
			<h1>{{ data.title }}</h1>
			<p class="info">
				<span>{{ letterObject }}</span>
				<span>时间：{{ data.createTime }}</span>
			</p>
			<div class="content" v-html="data.content"></div>
		</div>
	</el-dialog>
</template>

<script>
export default {
	props: {
		type: { type: String, default: '' },
		value: { type: Boolean, default: false },
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			visible: this.value
		};
	},
	computed: {
		letterObject() {
			if (this.type === '1') {
				return `收件人：${this.data.sendUser?.userName}`;
			} else if (this.type === '2') {
				let receiveUsers = this.data.receiveUserList || [];
				console.log(receiveUsers);
				let userNames = receiveUsers.map((n) => n?.userName);
				return `收件人：${userNames.join('，')}`;
			}
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	}
};
</script>

<style lang="scss" scoped>
.letter_detail_wrapper {
	flex: 1;
	padding: 6px;
	min-height: calc(80vh - 162px);
	h1 {
		color: #303133;
		font-size: 24px;
		text-align: center;
		margin-bottom: 10px;
	}
	p.info {
		color: #909399;
		font-size: 14px;
		text-align: center;
		span {
			margin: 0 10px;
		}
	}
	.content {
		font-size: 16px;	
		line-height: 1.5;
		padding: 16px 0;
		color: #606266;
		margin-top: 16px;
		word-break: break-all;
		white-space: pre-wrap;
		border-top: 1px solid #e4e7ed;
	}
}
</style>
